<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom :bgColor="bgColor" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">扫码出库</block>
				<view slot="right" @tap="saveData">提交</view>
			</cu-custom>
			<view class="header">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#ffffff"></uni-icon>
					<view class='cuIcon-search'></view>
					<input v-model="searchText" maxlength="300" confirm-type="search" @confirm="onInput" class="input" type="text"
						   placeholder="扫描或输入条码" />
					<!-- <input v-model="searchText" @input="onInput" focus="true" class="input" type="text" placeholder="扫描或输入条码" /> -->
					<view class='cuIcon-scan' @tap="scanCode"  style="transform: scale(1.6,1.6);color: #c6c6c6;"></view>
				</view>
			</view>

			<view class="cu-form-group" style="margin-bottom: 10upx;"  @click="goPerationList()">
				<view class="title">
					<text>仓库:</text>
					<text style="margin-left: 450rpx;" v-if="selectedFactory.value==null">请选择</text>
					<uni-icons type="right" size="16"  v-if="selectedFactory.value==null"></uni-icons>
					<!--					<img src="../../static/icon/choose.png" style="width: 32rpx;height: 20rpx;" alt="" v-if="selectedFactory.value==null">-->
				</view>
				<view class="uni-list-cell-db">
					<!-- <picker @change="bindGongxuChange" :value="indexGongxu" :range="gongxuPickerList">
						<view class="picker">{{gongxuPickerList[indexGongxu]}}</view>
					</picker> -->
					<view v-if="selectedFactory.value" :value="indexGongxu" class="picker">
						{{selectedFactory.text}}-{{selectedStore.operationName}}
					</view>
				</view>
			</view>
			<form @submit="formSubmit" @reset="formReset">
				<view class="cu-card dynamic" v-for="(item,index) in productList" :key="index">
					<view class="cu-item shadow" :style="{'background-color':colorFlag===true?'#3bade3':'#f37b1d'}">
						<view class="text-content2">
							<view style="width: 80%;margin-left: 25rpx;">销售订单/行号：&nbsp;&nbsp;&nbsp;&nbsp;{{item.kdauf}}/{{item.kdpos}}</view>
							<view @tap.stop="delItem(index)" style="width: 20%;text-align: center;"><image style="width: 40rpx;height: 40rpx;" src="../../static/icon/del.png" mode="widthFix" @tap="dropDown"></image></view>
						</view>
						<view class="text-content">
							<view style="width: 100%;">物料名称：&nbsp;&nbsp;&nbsp;{{item.maktx}}/{{item.typeLrName}}</view>
						</view>
						<view class="text-content">
							<view style="width: 100%;">尺码/客户：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.size}}/{{item.kunnrName}}</view>
							<!-- <view class="num">尺码：</view>
							<input type="number" class="numinput" style="width:40%;dispaly:inline" v-model="item.size" name="menge" /> -->
						</view>
						<view class="text-content">
							<!-- <view style="width: 100%;">数量：{{item.menge}}</view> -->
							<view style="display: flex;align-items: center;margin-right: 20rpx;">数量： </view>
							<view><input type="number" style="font-size: 40rpx;" v-model="item.menge" name="menge" /></view>

						</view>
						<view class="text-content">
							<view style="width: 100%;">条码：&nbsp;&nbsp;{{item.barcode}}</view>
						</view>
					</view>
				</view>
			</form>
		</scroll-view>
		<div class="modalTip" v-show="modalTip">
			<div class="modalTip-body">
				<span class="title">提示</span>
				<span class="content">存在一条相同数据，是否重复录入？</span>
				<div class="button-box">
					<div class="button" @click="cancel">取消</div>
					<div class="button" @click="confirm">确定</div>
				</div>
			</div>
		</div>
		<div class="modalTip2" v-show="modalTip2">
			<div class="modalTip-body">
				<span class="title">提示</span>
				<view class="content">
					<view class="conf-list-content">
						<span class="conf-list-content">
							<text>条码数量：</text>
							<text>{{productList.length}}</text>
						</span>
						<span class="conf-list-content">
							<text>扫描数量：</text>
							<text>{{total||0}}</text>
						</span>
					</view>

					<view class="uni-container">
						<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" >
							<uni-tr>
								<uni-th width="70" align="center">物料名称</uni-th>
								<uni-th width="50" align="center">条码数量</uni-th>
								<uni-th width="50" align="center">扫描数量</uni-th>
								<uni-th width="70" align="center">客户</uni-th>
								<uni-th width="70" align="center">销售订单</uni-th>
								<uni-th width="50" align="center">行号</uni-th>
							</uni-tr>
							<uni-tr v-for="(a, b) in handleList" :key="a">
								<uni-td align="center">{{ a.maktx }}</uni-td>
								<uni-td align="center">{{ a.barCodeNum }}</uni-td>
								<uni-td align="center">{{ a.menge }}</uni-td>
								<uni-td align="center">{{ a.kunnrName }}</uni-td>
								<uni-td align="center">{{ a.kdauf }}</uni-td>
								<uni-td align="center">{{ a.kdpos }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
			    </view>
				<view class="button-box2" style="border-top: solid 1px #e5e5e5;">
					<view style="width: 50%;height: 80upx;line-height: 80upx;text-align: center;border-right: solid 1px #e5e5e5;font-size: 28upx;color: black;" @click="cancel2">取消</view>
					<view style="width: 50%;height: 80upx;line-height: 80upx;text-align: center;color: rgb(87, 133, 170);font-size: 28upx;" @click="pushData">确定</view>
				</view>
			</div>
		</div>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/api/api.js'
	import {scanMixin} from "../../common/scanMixin.js"
	export default {
		mixins: [scanMixin],
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				backFlag: true,
				handleList:[],
				total:0,
				content:'',
				modalTip: false,
				modalTip2: false,
				title: '下拉刷新 + 加载更多',
				data: [],
				productList: [],
				product: {
					budat:"",
					bwart:"601",
					lgort:"",
					werks:"",
					msegList:[],
				},
				werks:[],
				store:[],
				barcodeMap: new Map(),
				chooseList: [],
				array: [],
				index: 0,
				pageNo: 1,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
				showLoadMore: false,
				selFlag: false,
				date: new Date().toISOString().slice(0, 10),
				searchText: "",
				filterText: '',
				code: '',
				imageList: [],
				gongxuPickerList: ['请选择'],
				gongxuList: [],
				indexGongxu: 0,
				senddata: {
					sampleAndResult: {
						vornr: "",
					}
				},
				colorFlag: true,
				bgColor: 'bg-green',
				showFinish:'false',
				selectedFactory:{},
				selectedStore:{},
				order:{}
			};
		},

		// 导航搜索栏监听搜索事件
		onNavigationBarSearchInputConfirmed(e) {
			// 搜索框内容 : e.text
			// console.log(e.text);
		},
		onLoad() {
			let url = '/dcloud/sysPara/sysPara/list'
			let that = this
			this.$http.get(url, {
				params: {
					para: "confirmationShowFinish",
				}
			}).then(res => {
				if (res.data.success) {
					this.showFinish = res.data.result.records[0].value
				}
			}).catch(err => {
				console.log(err);
			});
			this.werks = uni.getStorageSync('werks');
			this.store = uni.getStorageSync('store');
			if(this.werks){
				this.selectedFactory = this.werks
			}
			if(this.store){
				this.selectedStore = this.store
			}
		},
		onShow() {
			this.registerReceiver();
			this.startScan();

			this.pageNo = 1,
					this.filter = "",
					this.endFlag = false,
					this.loadMoreText = "加载更多",
					this.showLoadMore = false;
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			if (pages[pages.length - 1].$vm.selectedFactory.value) {
				// 上一页传递过来的工厂和仓库
				this.selectedFactory = curPage.$vm.selectedFactory;
				this.selectedStore = curPage.$vm.selectedStore;
				this.indexGongxu = this.selectedFactory;
			}
		},
		onHide() {
			this.stopScan();
		},
		onUnload() {
			this.stopScan();

			this.max = 0,
					this.productList = [],
					this.pageNo = 1,
					this.filter = "",
					this.endFlag = false,
					this.loadMoreText = "加载更多",
					this.showLoadMore = false;
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				//	this.pageNo = this.pageNo + 1;
				// this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			this.initData();
		},
		onBackPress() {
			if (this.backFlag) {
				uni.showModal({
					title: "确定退出编辑？",
					content: "退出后内容不做保存",
					success: (res) => {
						if (res.confirm) {
							// console.log("确定返回");
							this.backFlag = false
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
							return true
						} else {
							this.backFlag = true
							return true
						}
					}
				})
				return true
			} else {
				return false
			}
		},
		methods: {
			beaforeUnLoad(){
				wx.enableAlertBeforeUnload({ //开启页面退出时的对话框
					message: "当前数据未提交，确定继续退出？",
					success: function (res) {
						return true
					},
					fail: function (err) {
						return false
					},
				});
			},
			confirm () {
				this.productList.push(this.temp)
				this.searchText=''
				this.colorFlag = !this.colorFlag
				this.modalTip =  false
			},
			cancel () {
				this.searchText=''
				this.modalTip =  false
			},
			onInput(e) {
				if (this.indexGongxu == 0) {
					this.searchText = ""
					this.$tip.toast('请先选择仓库')
					return;
				}
				let that = this
				console.log(e.detail.value)
				let beanch = ''
				let barCodeTemp = {}
				let url = '/dcloud/dcPacking/dcPacking/getPackingByBarCode'
				this.$http.get(url, {
					params: {
						'barCode':e.detail.value
					}
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						if(res.data.result){
							beanch=res.data.result.split('|');
							barCodeTemp={
								kdauf:beanch[0],
								kdpos:beanch[1],
								aufnr:null,
								matnr:beanch[3],
								maktx:beanch[4],
								color:beanch[5],
								size:beanch[6],
								menge:beanch[7],
								erfmg:beanch[7],
								kunnr:beanch[8],
								kunnrName:beanch[9],
								meins:beanch[10],
								erfme:beanch[10],
								barcode:beanch[11],
								typeLr:beanch[12],
								typeLrName:beanch[13],
							}
							console.log(barCodeTemp)
							that.getBarCode(barCodeTemp)
						}
					}else {
						uni.showToast({
							icon: 'none',
							duration:1200,
							title: res.data.message
						});
					}
				}).catch(err => {
					console.log(err);
				});
			},
			getBarCode(barCodeTemp){
				this.temp = barCodeTemp
				let flag = true;
				for (const row of this.productList) {
					if (row.barcode == barCodeTemp.barcode){
						flag=false
						break
					}
				}
				if(!flag){
					let that = this
					this.modalTip = true
				}else{
					this.productList.push(this.temp)
					this.searchText=''
					this.colorFlag = !this.colorFlag
					this.beaforeUnLoad();
					this.backFlag = true
				}

				if(this.colorFlag){
					this.bgColor = 'bg-green'
				}else{
					this.bgColor = 'bg-orange'
				}
			},
			//选择仓库
			goPerationList(){
				uni.navigateTo({
					url:'/packageA/mcloud/Storehouse'
				})
			},
			initData() {
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 300);
			},
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						that.searchText = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			saveData() {
				if (this.indexGongxu == 0) {
					this.$tip.alert('请选择仓库');
					return;
				}
				if (this.productList.length == 0) {
					this.$tip.alert('没有扫描数据');
					return;
				}
				this.total = 0
				this.productList.forEach( item => {
					if(item.menge){
						this.total += Number(item.menge)
					}
				})
				this.handleList = []
				var map = [
					{
						kdpos: this.productList[0].kdpos,
						kdauf: this.productList[0].kdauf,
						matnr: this.productList[0].matnr,
						maktx: this.productList[0].maktx,
						kunnrName: this.productList[0].kunnrName,
						barCodeNum: 0,
						menge: 0,
						item: [this.productList[0]],
					}
				]
				for (var i = 1; i < this.productList.length; i++) {
					let bool = map.some((it)=>{
						if((this.productList[i].matnr == it.matnr) && (this.productList[i].kdauf == it.kdauf) && (this.productList[i].kdpos == it.kdpos)){
							it['item'].push(this.productList[i])
						}
						return ((this.productList[i].matnr == it.matnr) && (this.productList[i].kdauf == it.kdauf) && (this.productList[i].kdpos == it.kdpos))
					})
					if(!bool){
						map.push({
							kdpos: this.productList[i].kdpos,
							kdauf: this.productList[i].kdauf,
							matnr: this.productList[i].matnr,
							maktx: this.productList[i].maktx,
							kunnrName: this.productList[i].kunnrName,
							barCodeNum: 0,
							menge: 0,
							item: [this.productList[i]],
						})
					}
				}
				map.forEach(r=>{
					let mengeTotal = 0
					r.item.forEach(row=>{
						mengeTotal += Number(row.menge)
					})
					r.menge = mengeTotal
					r.barCodeNum = r.item.length
				})
				this.handleList = map
				if (this.handleList.length>0){
					this.modalTip2 = true
				}

			},
			cancel2 () {
				this.modalTip2 =  false
			},
			pushData() {
				let url = 'dcloud/mm/goodsIssue/main/addByMobile'
				this.productList.forEach(res=>{
					res.erfmg = res.menge
				})
				this.product = {
					werks : this.selectedFactory.value,
					lgort : this.selectedStore.operationCode,
					budat:new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
					bwart:"601",
					byBarcode:true,
					msegList:this.productList,
				}
				this.$http.post(url, this.product, {
					emulateJSON: true
				}).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							uni.showToast({
								// icon: 'none',
								title: '保存成功'
							});
							this.searchText = ""
							this.productList = []
							this.barcodeMap = new Map()
							this.modalTip2 = false
							this.backFlag = false
							wx.disableAlertBeforeUnload()
						}
					}else{
						uni.showToast({
							icon: 'none',
							title: res.data.message
						});
						this.modalTip2 = false
					}
				}).catch(err => {
					console.log(err);
					this.modalTip2 = false
				});
			},
			delItem(index){
				let list = this.productList
				list.splice(index,1)
				this.productList = list
				if(this.productList.length == 0){
					this.backFlag = false
					wx.disableAlertBeforeUnload()
				}
			},

		}
	}
</script>
<style lang="scss">
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		background-color: #314054;
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}


	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #414f61;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}

	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		color: #FFFFFF;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.cu-card>.cu-item {
		margin-bottom: 5px;
		margin-top: 10px;
	}

	.cu-card.dynamic>.cu-item>.text-content {
		display: flex;
		flex-direction: row;
		margin-bottom: 1px;
		margin-top: 6px;
		width: 100%;
	}

	.cu-card.dynamic>.cu-item>.text-content2 {
		display: flex;
		flex-direction: row;
		margin-bottom: 1px;
		margin-top: 6px;
		width: 100%;
		justify-content: left;
		align-items: center;
		margin-left: 6rpx;
	}

	.date {
		height: 260rpx;
		text-align: center;
		background-color: #0081ff;
		color: #FFFFFF;
		word-break: break-all;
		margin-top: -1px;
	}

	.text {
		margin-top: 10rpx;
		word-break: break-all;
		color: #FFFFFF;
	}

	.baogong {
		margin-top: 6px;
		margin-botton: 6px;
		text-align: center;
		display: block;
		margin: 0 auto;
	}

	.mini-btn {
		text-align: center;
		border-radius: 15rpx;
		width: 200rpx;
		height: 70rpx;
		background-color: #0081ff;
		color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.num {
		float: left;
	}

	.numinput {
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		text-align: center;
	}
	.modalTip{
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		left: 0;
		z-index: 1001;
		.modalTip-body{
			width: 80%;
			height: 440rpx;
			display: flex;
			background-color: rgba(255, 255, 255, 1);
			flex-direction: column;
			align-items: center;
			padding: 27rpx 40rpx;
			border-radius: 21rpx;
		}
		.title{
			display: inline-block;
			font-size: 50rpx;
			color: #000;
		}
		.content{
			margin-top: 20rpx;
			display: inline-block;
			font-size: 38rpx;
			color: #222;
		}
		.button-box{
			margin-top: 60rpx;
			display: flex;
			flex-direction: row;
			width: 100%;
			.button{
				width: 50%;
				font-size: 35rpx;
				color: #000;
				text-align: center;
			}
		}
	}
	.uni-input {
		margin-bottom: -10upx;
	}
	.picker {
		text-align: right;
	}
	.modalTip2{
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		left: 0;
		z-index: 1001;
		.modalTip-body{
			width: 100%;
			height: 70%;
			margin-top: 40%;
			display: flex;
			background-color: rgba(255, 255, 255, 1);
			flex-direction: column;
			align-items: center;
			padding: 27rpx 40rpx;
			border-radius: 21rpx;
			overflow: scroll;
			.content{
				display: flex;
				font-size: 38rpx;
				color: #222;
				flex-direction: column;
				width: 100%;
				margin-bottom: 80rpx;
				.conf-list-content {
					height: 60rpx;
					padding:20rpx 0 20upx;
					font-size: 36rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
				}
				.uni-container{
					width: 100%;
					margin-top: 50rpx;
				}
			}
			.button-box{
				margin-top: 60rpx;
				display: flex;
				flex-direction: row;
				width: 100%;
				.button{
					width: 50%;
					font-size: 35rpx;
					color: #000;
					text-align: center;
				}
				position: fixed;
				bottom: 0
			}
			.button-box2{
				width:100%;
				height: 80upx;
				display: flex;
				background-color: #FFFFFF;
				justify-content: space-between;
				view{
					font-size: 26upx;
				}
				position: fixed;
				bottom: 0
			}
		}
		.title{
			display: inline-block;
			font-size: 50rpx;
			color: #000;
		}



	}


</style>
